<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>1_使用jsx创建虚拟DOM</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <!-- jsx转化为js -->
    <script src="../js/babel.min.js"></script>
  </head>
  <body>
    <div id="test"></div>
    <script type="text/babel">  /* 此处一定要写babel */
      // 1.创建虚拟DOM
      const VDOM = (                     // 此处一定不要写引号，也不能使用`，因为不是字符串；并且h1标签需要闭合，否则报错 react SyntaxError：内联Babel脚本：Unterminated JSX内容
        <h1 id="title">
          <span>Hello world!</span>
        </h1>
      )
      // 2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById("test"))

      /* 
      React团队在3月29日新推出了React v18.0版本，现在npm 默认的就是18版本，由于React 18 不再支持 ReactDOM.render。控制台会抛出：
      Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. 的警告信息，
      虽然不会影响程序正常的运行，但是控制台一直有警告强迫症属实难受。其实在index.js入口文件中改用 createRoot即可消除警告。 
      */

      /* 
        import React from 'react';
        import ReactDOM from 'react-dom';
        import App from './App';
        
        import { createRoot } from 'react-dom/client';
        const container = document.getElementById('root');
        const root = createRoot(container);
        root.render(<App />);
        
        
        // 被注释的是之前ReactDOM.render的代码
        // ReactDOM.render(
        //   <React.StrictMode>
        //     <App />
        //   </React.StrictMode>,
        //   document.getElementById('root')
        // );
 
      */
    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this page for starting a new React project with JSX:
      https://react.dev/learn/start-a-new-react-project

      Read this page for adding React with JSX to an existing project:
      https://react.dev/learn/add-react-to-an-existing-project
    -->
  </body>
</html>